<script setup>
defineOptions({
  name: 'NewsMessage'
})
defineProps({
  item: {
    type: Object
  }
})
</script>

<template>
  <div class="col-12 col-lg-6 my-3" v-if="item">
    <div class="card mx-4 row border-0 p-0 d-flex flex-row align-items-center">
      <div class="col-5 py-3">
        <h2 align="center">
          {{
            item['created_at'].slice(
              item['created_at'].lastIndexOf('-') + 1,
              item['created_at'].lastIndexOf('-') + 3
            )
          }}
        </h2>
        <p align="center">
          {{ item['created_at'].slice(0, item['created_at'].lastIndexOf('-')) }}
        </p>
      </div>
      <div class="col-7">
        <h5 class="text">{{ item.newstitle }}</h5>
        <p class="text" v-html="item.newscontent"></p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card {
  .text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  position: relative;
  transition: 0.5s;
  cursor: pointer;

  p {
    color: gray;
  }

  .col-5 {
    background-color: rgba(119, 119, 119, 0.125);
  }

  .col-7 {
    background-color: transparent;
  }

  & > * {
    z-index: 5;
  }

  &:hover {
    color: white;

    p {
      color: white;
    }
  }

  &::after {
    content: '';
    background-color: #104094;
    width: 0%;
    height: 100%;
    left: 0;
    position: absolute;
    z-index: 3;
    transition: 0.5s;
  }

  &:hover::after {
    width: 100%;
  }
}
</style>
